<template>
  <div class="bus-apply page">
    <div class="form">
      <text-input :value="startDateTxt" @click.native="showStartDate" :disable="true" label="开始时间"></text-input>
      <text-input class="plane" :value="endDateTxt" @click.native="showEndDate" :disable="true" label="结束时间"></text-input>
      <text-input class="plane" :value="hours"  :disable="true" label="总共时间"></text-input>
<!--      <text-input class="plane" v-if="apply.type==1" v-model="apply.startPlace"   label="出发地"></text-input>-->
<!--      <text-input class="plane" v-if="apply.type==1" v-model="apply.midPlace" desc="没有可不填"  label="途径地"></text-input>-->
<!--      <text-input class="plane" v-if="apply.type==1" v-model="apply.endPlace"   label="目的地"></text-input>-->

      <!--      <label-switch class="plane" :alias="['请假','出差']" v-model="apply.type" label="类型"></label-switch>-->
<!--      <text-input class="plane" v-if="apply.type==1" :value="apply.tripType" @click.native="showTripType" :disable="true" label="出行路径"></text-input>-->
<!--      <text-input class="plane" v-if="apply.type==1" :value="apply.tripWay" @click.native="showTripWay" :disable="true" label="出行方式"></text-input>-->
      <text-input class="plane"  :value="leaveTypeOptions[apply.leaveType]" @click.native="showType" :disable="true" label="请假类型"></text-input>
      <text-area class="plane"  v-model="apply.info" icon="iconkaohejilu" title="请假理由"></text-area>
<!--      <text-area class="plane" v-else v-model="apply.info" icon="iconkaohejilu" title="出差事由"></text-area>-->
      <div @click="confirm" class="btn plane" v-if="canEdit">提交</div>
<!--      <span class="more" @click="more()">申请记录</span>-->
    </div>
  </div>
</template>

<script>
import textInput from '../../../components/form/text-input'
import textArea from '../../../components/form/text-area'
// import labelSwitch from '../../../components/form/label-switch'
import { getBusLeave, applyLeave, options, totalHour } from '../../../api/apply'
import { parseTime } from '../../../util/time'
import { showCorrect } from '../../../dialog'
import { mapState } from '_vuex@3.6.2@vuex'

export default {
  components: {
    textArea, textInput
  },
  mounted () {
    this.dateSegmentPicker = this.$createSegmentPicker({
      data: this.dateSegmentData,
      onSelect: (selectedDates, selectedVals, selectedTexts) => {
        this.apply.startDate = selectedDates[0]
        this.apply.endDate = selectedDates[1]
      },
      onNext: (i, selectedDate, selectedValue, selectedText) => {
        this.dateSegmentData[1].min = new Date(selectedDate.getTime() + 1000 * 60 * 60 * 24)
        if (i === 0) {
          this.dateSegmentPicker.$updateProps({
            data: this.dateSegmentData
          })
        }
      }
    })
  },
  created () {
    this.apply.id = this.$route.query.id
    this.apply.type = 0
    options().then(res => {
      this.leaveTypeOptions = res.data.leaveTypeOptions
      this.leaveTypeMap = res.data.leaveTypeOptions.map((r, index) => {
        return { text: r, value: index }
      })
    })
    if (this.apply.id) {
      getBusLeave(this.apply.id).then(res => {
        this.apply = res.data
      })
    }
  },
  methods: {
    showTripType () {
      const data = this.tripTypeOptions.map(m => {
        const t = { text: m, value: m }
        return t
      })
      if (!this.tripTypePicker) {
        this.tripTypePicker = this.$createPicker({
          title: '出差路径',
          data: [data],
          onSelect: this.selectTripType
        })
      }
      this.tripTypePicker.show()
    },
    selectTripType (val) {
      this.apply.tripType = val.join()
    },
    selectTripWay (val) {
      this.apply.tripWay = val.join()
    },
    showTripWay () {
      const data = this.tripWayOptions.map(m => {
        const t = { text: m, value: m }
        return t
      })
      if (!this.tripWayPicker) {
        this.tripWayPicker = this.$createPicker({
          title: '出差方式',
          data: [data],
          onSelect: this.selectTripWay
        })
      }
      this.tripWayPicker.show()
    },
    getHours () {
      if (!this.apply.startDate || !this.apply.endDate) {
        return
      }
      totalHour(parseTime(this.apply.startDate), parseTime(this.apply.endDate)).then(res => {
        this.hours = res.data
      })
    },
    showType () {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: '请假类型',
          data: [this.leaveTypeMap],
          onSelect: this.selectHandle
        })
      }
      this.picker.show()
    },
    selectHandle (selectedVal, selectedIndex, selectedText) {
      this.apply.leaveType = selectedVal.join()
    },
    more () {
      this.$router.push('/apply/bus/list?type=' + this.apply.type + '&top=' + 0)
    },
    showStartDate () {
      if (!this.startDateTimePicker) {
        this.startDateTimePicker = this.$createDatePicker({
          title: '开始时间',
          min: new Date(),
          max: new Date(2030, 11, 31, 0, 0, 0),
          value: new Date(),
          columnCount: 4,
          onSelect: this.selectStartDate
        })
      }
      this.startDateTimePicker.show()
    },
    showEndDate () {
      if (!this.endDateTimePicker) {
        this.endDateTimePicker = this.$createDatePicker({
          title: '结束时间',
          min: this.min,
          max: new Date(2030, 11, 31, 0, 0, 0),
          value: new Date(),
          columnCount: 4,
          onSelect: this.selectEndDate
        })
      }
      this.endDateTimePicker.show()
    },
    selectStartDate (date, selectedVal, selectedText) {
      this.apply.startDate = date
      this.min = this.apply.startDate
      this.getHours()
    },
    selectEndDate (date, selectedVal, selectedText) {
      this.apply.endDate = date
      this.getHours()
    },
    confirm () {
      this.apply.startDate = parseTime(this.apply.startDate)
      this.apply.endDate = parseTime(this.apply.endDate)
      applyLeave(this.apply, this.hours).then(res => {
        this.apply = res.data
        showCorrect('提交成功,等待审核').then(res => {
          this.$router.push({
            path: '/apply/bus/list',
            query: {
              type: this.apply.type,
              top: 0
            }
          })
        })
      })
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    }),
    canEdit () {
      if (!this.apply.id) {
        return true
      }
      // else {
      //   if (this.apply.status == 0 && this.apply.userId == this.uid) {
      //     return true
      //   }
      // }
      return false
    },
    startDateTxt () {
      if (this.apply.startDate) {
        return parseTime(this.apply.startDate, '{y}.{m}.{d} {h}:{i}:{s}')
      } else {
        return ''
      }
    },
    endDateTxt () {
      if (this.apply.endDate) {
        return parseTime(this.apply.endDate, '{y}.{m}.{d} {h}:{i}:{s}')
      } else {
        return ''
      }
    }
  },
  data () {
    return {
      hours: 0,
      alias: {
        value: 'name',
        text: 'val'
      },
      tripWayOptions: ['飞机', '火车', '汽车', '自驾', '其它'],
      tripTypeOptions: ['单程', '往返'],
      leaveTypeOptions: [],
      leaveTypeMap: [],
      min: new Date(),
      dateSegmentData: [
        {
          is: 'cube-date-picker',
          title: '开始时间',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2030, 11, 31, 0, 0, 0)
        },
        {
          is: 'cube-date-picker',
          title: '就职时间',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2030, 11, 31, 0, 0, 0)
        }
      ],
      apply: {
        leaveType: null,
        startDate: null,
        endDate: null,
        type: 0,
        info: null,
        startPlace: null,
        midPlace: null,
        endPlace: null,
        tripType: null,
        tripWay: null

      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .bus-apply
    .form
      padding-bottom 20px
      margin-top 20px
      .plane
        margin-top 15px
      .btn
        margin-top 20px
        height:44px;
        background:rgba(0,156,78,1);
        border-radius:20px;
        dpr-font(14Px)
        color white
        display flex
        align-items center
        justify-content center
    .more
      margin-top 20px
      color gray
      display flex
      align-items center
      justify-content center
      dpr-font(12Px)
</style>
